<template>
    <div>
        <div class="flex">
            <div class="e-flex-1">
                <div class="container">
                    <div class="admin-index">
                        <div class="e-p-b-30" style="font-size: 18px;">数据中台</div>
                        <el-radio-group v-model="dataType" class="e-m-b-45">
                            <el-radio-button label="0">数据中台</el-radio-button>
                            <el-radio-button label="1">库存表</el-radio-button>
                            <el-radio-button label="2">线上回收统计</el-radio-button>
                            <el-radio-button label="3">门店回收统计</el-radio-button>
                            <el-radio-button label="4">小哥入库统计</el-radio-button>
                            <el-radio-button label="5">出库销售统计</el-radio-button>
                        </el-radio-group>
                        <!-- <div class="e-p-b-15">
                            <div class="section">
                                <el-row :gutter="20" type="flex">
                                    <el-col :span="24">
                                        <div class="grid-content">
                                            <div class="admin-statistics-content">
                                                <div class="item e-flex-1">
                                                    <label>账户余额</label>
                                                    <div>
                                                        <span class="num">{{ operator.balance }}</span><small>元</small>
                                                        <el-button @click="goBalanceRecord" type="text" size="mini"
                                                            icon="el-icon-view">查看余额变动记录</el-button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div> -->
                        <div class="section-head e-m-b-15">
                            <div><span class="blue-span"></span><span>运营商总体库存概况</span></div>
                        </div>
                        <div class="e-p-b-15">
                            <div class="section">
                                <el-row :gutter="20" type="flex">
                                    <el-col :span="24">
                                        <div class="grid-content">
                                            <div class="admin-statistics-content">
                                                <div class="item e-flex-1">
                                                    <label>库存总件数</label>
                                                    <div><span class="num">{{ recycle.stockquantity
                                                            }}</span><small>件</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>库存总重量</label>
                                                    <div><span class="num">{{ recycle.stockweight
                                                            }}</span><small>KG</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>库存总估值</label>
                                                    <div><span class="num">{{ recycle.stockestimation
                                                            }}</span><small>元</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>未入库总件数</label>
                                                    <div><span class="num">{{ recycle.notinstockquantity
                                                            }}</span><small>件</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>未入库总重量</label>
                                                    <div><span class="num">{{ recycle.notinstockweight
                                                            }}</span><small>KG</small></div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div class="e-p-b-15">
                            <div class="section">
                                <el-row :gutter="20" type="flex">
                                    <el-col :span="24">
                                        <div class="grid-content">
                                            <div class="admin-statistics-content">
                                                <div class="item e-flex-1">
                                                    <label>未入库总估值</label>
                                                    <div><span class="num">{{ recycle.notinstockestimation
                                                            }}</span><small>元</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>库存称重总估值</label>
                                                    <div><span class="num">{{ recycle.stockweightestimation
                                                            }}</span><small>元</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>库存按件总估值</label>
                                                    <div><span class="num">{{ recycle.stockquantityestimation
                                                            }}</span><small>元</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>未入库称重总估值</label>
                                                    <div><span class="num">{{ recycle.notinstockweightestimation
                                                            }}</span><small>元</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>未入库按件总估值</label>
                                                    <div><span class="num">{{ recycle.notinstockquantityestimation
                                                            }}</span><small>元</small></div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <!-- 库存排行 -->
                        <!-- <div class="e-p-b-15">
                            <div class="section">
                                <div class="flex">
                                    <div class="e-flex-1">
                                        <div class="grid-content e-m-r-15">
                                            <categoryChart v-if="loading == false" :id="'FranchiseStock'"
                                                :data="franchiseRecycleData.weightContras"
                                                :series="[{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]">
                                            </categoryChart>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- 运营商总体回收概况 -->
                        <div class="section-head e-m-b-15">
                            <div><span class="blue-span"></span><span>运营商总体回收概况</span></div>
                        </div>
                        <div class="e-p-b-15">
                            <el-form ref="form" :model="form" size="small"
                                style="border-bottom: 1px solid var(--light);">
                                <!-- 时间筛选 -->
                                <timeChangeList v-model="form.timeType" @input="getRecycle" @change="setTime">
                                </timeChangeList>
                            </el-form>
                        </div>
                        <!-- 回收总重量、回收总件数、回收总单数 -->
                        <div class="e-p-b-15">
                            <div class="section">
                                <el-row :gutter="20" type="flex">
                                    <el-col :span="24">
                                        <div class="grid-content">
                                            <div class="admin-statistics-content">
                                                <div class="item e-flex-1">
                                                    <div class="flex">
                                                        <div class="e-flex-1">
                                                            <label>回收总重量</label>
                                                            <div><span class="num">{{ recycle.weight
                                                                    }}</span><small>KG</small></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex e-m-r-15 e-m-t-15">
                                                        <div class="e-flex-1 small-item">
                                                            <label>上门回收总重量：</label>
                                                            <div><span class="num e-font-24">{{ recycle.onsiteweight
                                                                    }}</span><small>KG</small></div>
                                                        </div>
                                                        <div class="e-flex-1 small-item">
                                                            <label>站点回收总重量：</label>
                                                            <div><span class="num e-font-24">{{ recycle.storeweight
                                                                    }}</span><small>KG</small></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <div class="flex">
                                                        <div class="e-flex-1">
                                                            <label>回收总件数</label>
                                                            <div><span class="num">{{ parseInt(recycle.quantity) }}</span><small>件</small></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex e-m-r-15 e-m-t-15">
                                                        <div class="e-flex-1 small-item">
                                                            <label>上门回收总件数：</label>
                                                            <div><span class="num e-font-24">{{ parseInt(recycle.onsitequantity) }}</span><small>件</small></div>
                                                        </div>
                                                        <div class="e-flex-1 small-item">
                                                            <label>站点回收总件数：</label>
                                                            <div><span class="num e-font-24">{{ parseInt(recycle.storequantity) }}</span><small>件</small></div>
                                                        </div>
                                                    </div>
                                                    <!-- <pieChart 
                                id="recycleQuantity" 
                                :data="[
                                  { value: recycle.onsitequantity, name: '回收线上总件数' },
                                  { value: recycle.storequantity, name: '回收线下总件数' },
                                ]">
                              </pieChart> -->
                                                </div>
                                                <div class="item e-flex-1">
                                                    <div class="flex">
                                                        <div class="e-flex-1">
                                                            <label>回收总单数</label>
                                                            <div><span class="num">{{ recycle.ordernumber
                                                                    }}</span><small>条</small></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex e-m-r-15 e-m-t-15">
                                                        <div class="e-flex-1 small-item">
                                                            <label>上门回收总单数：</label>
                                                            <div><span class="num e-font-24">{{
                                                                    recycle.onsiteordernumber }}</span><small>条</small>
                                                            </div>
                                                        </div>
                                                        <div class="e-flex-1 small-item">
                                                            <label>站点回收总单数：</label>
                                                            <div><span class="num e-font-24">{{ recycle.storeordernumber
                                                                    }}</span><small>条</small></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <!-- 回收总毛利、预估销售总金额、回收总金额 -->
                        <div class="e-p-b-15">
                            <div class="section">
                                <el-row :gutter="20" type="flex">
                                    <el-col :span="24">
                                        <div class="grid-content">
                                            <div class="admin-statistics-content">
                                                <div class="item e-flex-1">
                                                    <div class="flex">
                                                        <div class="e-flex-1">
                                                            <label>回收总毛利<el-tooltip class="item" effect="dark"
                                                                    content="xxxxxx" placement="top"><span
                                                                        class="el-icon-question e-p-l-4"></span></el-tooltip></label>
                                                            <div><span class="num">{{ recycle.grossprofit
                                                                    }}</span><small>元</small></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex e-m-r-15 e-m-t-15">
                                                        <div class="e-flex-1 small-item">
                                                            <label>上门回收总毛利：</label>
                                                            <div><span class="num e-font-24">{{
                                                                    recycle.onsitegrossprofit }}</span><small>元</small>
                                                            </div>
                                                        </div>
                                                        <div class="e-flex-1 small-item">
                                                            <label>站点回收总毛利：</label>
                                                            <div><span class="num e-font-24">{{ recycle.storegrossprofit
                                                                    }}</span><small>元</small></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <div class="flex">
                                                        <div class="e-flex-1">
                                                            <label>预估销售总金额</label>
                                                            <div><span class="num">{{ recycle.salesamount
                                                                    }}</span><small>元</small></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex e-m-r-15 e-m-t-15">
                                                        <div class="e-flex-1 small-item">
                                                            <label>上门回收预估销售总金额：</label>
                                                            <div><span class="num e-font-24">{{
                                                                    recycle.onsitesalesamount }}</span><small>元</small>
                                                            </div>
                                                        </div>
                                                        <div class="e-flex-1 small-item">
                                                            <label>站点回收预估销售总金额：</label>
                                                            <div><span class="num e-font-24">{{ recycle.storesalesamount
                                                                    }}</span><small>元</small></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <div class="flex">
                                                        <div class="e-flex-1">
                                                            <label>回收总金额</label>
                                                            <div><span class="num">{{ recycle.amount
                                                                    }}</span><small>元</small></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex e-m-r-15 e-m-t-15">
                                                        <div class="e-flex-1 small-item">
                                                            <label>上门回收总金额：</label>
                                                            <div><span class="num e-font-24">{{ recycle.onsiteamount
                                                                    }}</span><small>元</small></div>
                                                        </div>
                                                        <div class="e-flex-1 small-item">
                                                            <label>站点回收总金额：</label>
                                                            <div><span class="num e-font-24">{{ recycle.storeamount
                                                                    }}</span><small>元</small></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <!-- 旗下加盟商回收概况 -->
                        <div class="section-head e-m-b-15">
                            <div><span class="blue-span"></span><span>旗下加盟商回收概况</span></div>
                        </div>
                        <!-- 旗下加盟商回收排行 -->
                        <div class="section">
                            <div class="flex">
                                <div class="e-flex-1">
                                    <el-table :data="recycle.details" border style="width: 100%">
                                        <el-table-column prop="name" label="加盟商名称">
                                        </el-table-column>
                                        <el-table-column prop="" label="回收数量">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.weight > 0" class="e-p-r-10">{{ scope.row.weight
                                                    }}KG</span>
                                                <span v-if="scope.row.quantity > 0" class="e-p-r-10">{{
                                                    scope.row.quantity }}件</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="ordernumber" label="回收单数">
                                        </el-table-column>
                                        <el-table-column prop="amount" label="回收金额">
                                        </el-table-column>
                                        <el-table-column prop="grossprofit" label="回收毛利">
                                        </el-table-column>
                                        <el-table-column prop="salesamount" label="预估销售金额">
                                        </el-table-column>
                                        <el-table-column prop="" label="库存">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.stockweight > 0" class="e-p-r-10">{{
                                                    scope.row.stockweight }}KG</span>
                                                <span v-if="scope.row.stockquantity > 0" class="e-p-r-10">{{
                                                    scope.row.stockquantity }}件</span>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    mapState
} from 'vuex';
import timeChangeList from '@/components/form-select-type/timeChangeList.vue'
import pieChart from '@/components/index-echarts/pie-chart.vue'
import categoryChart from '@/components/index-echarts/category-chart.vue'

export default {
    layout: 'admin',
    components: {
        timeChangeList,
        pieChart,
        categoryChart
    },
    data() {
        return {
            dataType: 0,
            loading: true,
            form: {
                timeType: 3,
                startDate: "",
                endDate: ""
            },
            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的
                }
            },
            // integrals:{
            //   integrals: 0,
            //   useintegrals: 0,
            //   amount: 0
            // }

            // 回收排行
            recycle: {
                "quantity": 0, //回收总件数
                "onsitequantity": 0, //回收线上总件数
                "storequantity": 0, //回收线下总件数
                "ordernumber": 0, //回收总单数
                "onsiteordernumber": 0, //回收线上总单数
                "storeordernumber": 0, //回收线下总单数
                "weight": 0, //回收总重量
                "onsiteweight": 0, //回收线上总重量
                "storeweight": 0, //回收线下总重量
                "grossprofit": 0, //回收总毛利
                "onsitegrossprofit": 0, //回收线上总毛利
                "storegrossprofit": 0, //回收线下总毛利
                "salesamount": 0, //预估销售总金额
                "onsitesalesamount": 0, //预估销售线上总金额
                "storesalesamount": 0, //预估销售线下总金额
                "amount": 0, //回收总金额
                "onsiteamount": 0, //回收线上总金额
                "storeamount": 0, //回收线下总金额
                "stockquantity": 0, //库存总件数
                "stockweight": 0, //库存总重量
                "stockestimation": 0, //库存总估值（元）
                "notinstockquantity": 0, //未入库总件数
                "notinstockweight": 0, //未入库总重量
                "notinstockestimation": 0, //未入库总估值（元）
                "stockweightestimation": 0, //库存称重总估值（元）
                "stockquantityestimation": 0, //库存按件总估值（元）
                "notinstockweightestimation": 0, //未入库称重总估值（元）
                "notinstockquantityestimation": 0, //未入库按件总估值（元）
                "details": [
                    {
                        "id": 0, //加盟商id
                        "name": "", //加盟商名称
                        "usestate": {},
                        "stockquantity": 0, //库存件数
                        "stockweight": 0, //库存重量
                        "stockestimation": 0, //库存估值（元）
                        "stockweightestimation": 0, //库存称重估值（元）
                        "stockquantityestimation": 0, //库存按件估值（元）
                        "notinstockweightestimation": 0, //未入库称重估值（元）
                        "notinstockquantityestimation": 0, //未入库按件估值（元）
                        "notinstockquantity": 0, //未入库件数
                        "notinstockweight": 0, //未入库重量
                        "notinstockestimation": 0, //未入库估值（元）
                        "quantity": 0, //回收件数
                        "weight": 0, //回收重量
                        "ordernumber": 0, //回收单数
                        "grossprofit": 0, //回收毛利
                        "amount": 0, //回收金额
                        "salesamount": 0, //预估销售金额
                        "onsite": {
                            "quantity": 0, //回收件数
                            "ordernumber": 0, //回收单数
                            "weight": 0, //回收重量
                            "grossprofit": 0, //回收毛利
                            "amount": 0, //回收金额
                            "salesamount": 0 //预估销售金额
                        },
                        "store": {
                            "quantity": 0, //回收件数
                            "ordernumber": 0, //回收单数
                            "weight": 0, //回收重量
                            "grossprofit": 0, //回收毛利
                            "amount": 0, //回收金额
                            "salesamount": 0 //预估销售金额
                        }
                    }
                ]
            },
            // 加盟商数据汇总
            franchiseData: {
                // 回收重量、库存重量、未入库重量
                weightContrast: [],
                // 回收件数、库存件数、未入库件数
                quantityContrast: []
            },
            // 
            franchiseRecycle: {
                notinstockquantity: 0, //未入库总件数
                notinstockweight: 0, //未入库总重量
                stockquantity: 0, //库存总件数
                stockweight: 0, //库存总重量
                details: []
            },
            franchiseRecycleData: {
                weightContras: [],
                quantityContrast: []
            }
        }
    },
    head() {
        return {
            title: '首页',
        }
    },
    computed: {
        ...mapState({
            adminInfo: state => state.userdetail,
            loading: state => state.loading,
            operator: state => state.operator
        }),
    },
    mounted() {
        this.getRecycle()
        this.getFranchiseStock()

        // this.$axios.post('/Operator/Balance/Recharge',{
        //   "id": 1,
        //   "amount": 9988,
        //   "remarks": ""
        // }).then((res)=>{
        //   console.log('充值成功',res)
        // })
    },
    watch: {
        dataType(val) {
            console.log(val)
            let type = Number(val)
            switch (type) {
                case 0:
                    this.$router.push({
                        path: '/'
                    })
                    break;
                case 1:
                    this.$router.push({
                        path: '/statistics/inventory'
                    })
                    break;
                case 2:
                    this.$router.push({
                        path: '/statistics/online'
                    })
                    break;
                case 3:
                    this.$router.push({
                        path: '/statistics/store'
                    })
                    break;
                case 4:
                    this.$router.push({
                        path: '/statistics/onlinestorage'
                    })
                    break;
                case 5:
                    this.$router.push({
                        path: '/statistics/storeSell'
                    })
                    break;
            }
        }
    },
    methods: {
        setTime(e) {
            console.log(e)
            this.form.startDate = e['startDate']
            this.form.endDate = e['endDate']
            this.form.timeType = e['timeType']
            this.getRecycle()
        },
        // 回收排行
        getRecycle() {
            this.loading = true
            let form = {
                timeType: this.form.timeType,
                start: this.form.startDate,
                end: this.form.endDate
            }

            this.$axios.post('/Statistics/Franchise/Recycle', form).then((res) => {
                this.recycle = res
                //回收重量、库存重量、未入库重量
                this.franchiseData.weightContrast = [
                    ['product', '回收重量(KG)', '库存重量(KG)', '未入库重量(KG)']
                ]
                this.recycle.details.forEach((item) => {
                    this.franchiseData.weightContrast.push([item.name, item.weight, item.stockweight, item.notinstockweight])
                });
                //回收件数、库存件数、未入库件数
                this.franchiseData.quantityContrast = [
                    ['product', '回收件数(件)', '库存件数(件)', '未入库件数(件)']
                ]
                this.recycle.details.forEach((item) => {
                    this.franchiseData.quantityContrast.push([item.name, item.quantity, item.stockquantity, item.notinstockquantity])
                });

                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },
        // 库存排行
        getFranchiseStock() {
            this.loading = true
            this.$axios.get(`/Statistics/Franchise/Stock`, {
                params: {
                    operatorId: JSON.parse(localStorage.getItem('lifeData')).operatorid,
                    franchiseId: 0
                }
            }).then((res) => {
                this.franchiseRecycle = res
                this.franchiseRecycleData.weightContras = [
                    ['product', '库存重量(KG)', '未入库重量(KG)', '库存件数(件)', '未入库件数(件)']
                ]
                this.franchiseRecycle.details.forEach((item) => {
                    this.franchiseRecycleData.weightContras.push([item.name, item.stockweight, item.notinstockweight, item.stockquantity, item.notinstockquantity])
                });
                // this.franchiseRecycleData.quantityContrast = [
                //   ['product', '库存件数(件)', '未入库件数(件)']
                // ]
                // this.franchiseRecycle.details.forEach((item) => {
                //   this.franchiseRecycleData.quantityContrast.push([item.name,item.stockquantity,item.notinstockquantity])
                // });
            }).catch((err) => {

            })
        },
        goBalanceRecord() {
            this.$router.push('/statistics/balanceRecord')
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    // min-height: auto;
}

.admin-index {
    .section {
        &+.section {
            margin-top: 15px;
        }

        .section-head {
            display: flex;
            align-items: center;

            .blue-span {
                background-color: var(--blue);
                width: 3px;
                height: 14px;
                display: inline-block;
                margin-right: 15px;
            }
        }
    }

    .tips-box {
        padding: 15px;

        .title {
            font-size: 20px;
            margin-bottom: 30px;
        }

        dl {
            dt {
                font-size: 14px;
                margin-bottom: 15px;

                &:before {
                    content: '';
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                    background-color: #e4e4e4;
                    border-radius: 10px;
                    margin-right: 12px;
                }
            }

            dd {
                font-size: 14px;
                color: var(--grey);
                margin-left: 22px;
            }
        }
    }

    .upload-demo {
        width: 100%;

        .el-upload-dragger {
            width: 100%;
        }
    }

    .grid-content {
        background-color: #fff;
        padding: 15px;
        height: calc(100% - 30px);
        border: 1px solid var(--light);
        border-radius: 4px;
        padding-right: 0 // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .admin-statistics-content {
        display: flex;

        .item {
            &+.item {
                border-left: 1px solid var(--light);
                padding-left: 15px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }

            .small-item {
                background-color: var(--light);
                text-align: center;
                padding: 10px;
                border-radius: 4px;

                &+.small-item {
                    margin-left: 10px;
                }
            }
        }
    }
}

// 公告
.notice-list {
    .item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 24px;
        margin-bottom: 4px;

        .item-content {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 4px;
            color: var(--dark);
            text-decoration: none;
            font-size: 13px;
            cursor: pointer;
        }
    }
}

// 待办事项
.todo-list {
    .item {
        display: flex;
        border-bottom: 1px solid var(--border-light);
        padding: 15px 0;

        &:last-child {
            border-bottom: 0;
        }

        .icon {
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: var(--orange);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            margin-right: 10px;

            &.t1 {
                background-color: var(--orange)
            }

            &.t2 {
                background-color: var(--green)
            }

            &.t3 {
                background-color: var(--cyan)
            }

            &.t4 {
                background-color: var(--primary)
            }
        }

        .item-content {
            .tname {
                font-size: 14px;
            }

            .text {
                font-size: 14px;
                color: var(--dark);
                padding: 3px 0;
            }

            .date {
                font-size: 12px;
                color: var(--grey);
            }
        }
    }
}

//快捷操作
.short-cuts {
    .item {
        font-size: 12px;
        text-align: center;
        display: inline-block;
        width: 33.33%;
        margin-bottom: 15px;

        .icon {
            width: 36px;
            height: 36px;
            color: var(--grey);
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            margin: 0 auto;
        }

        .tname {
            margin-top: 5px;
        }
    }
}
</style>